<template>
    <div class="pohotoinfo-cotrs">
        <!-- 图片标题 -->
        <h3 class="h3-size">
            {{imageInfo.title}}
        </h3>
        <div class="dateinfo">
            <span>{{imageInfo.add_time|dateFormat}}</span>
            <span>{{imageInfo.click}}次</span>
        </div>
        <hr>

        <!-- 缩略图部分 -->
        <div class="thumbs">
            <vue-preview :slides="thumimages"   @close="handleClose"></vue-preview>
        </div>
        <!-- 缩略图下内容 -->
        <div class="content" v-html="imageInfo.content">
            <!-- {{imageInfo.content}} -->
        </div>
        <hr>
        <comment :id="id"></comment>
    </div>
</template>

<script>
    import comment from '../tool/Comment.vue'
    export default {
        data() {
            return {
                imageInfo: {},
                thumimages: []
            }
        },
        created() {
            this.getimageInfo(),
                this.getthumimages()
        },
        components: {
            comment
        },
        methods: {

            async getimageInfo() {
                const {
                    data
                } = await this.$http.get("api/getimageInfo/" + this.id);
                if (data.status === 0) this.imageInfo = data.message[0]
                console.log(data.message[0])

            },
            async getthumimages() {
                const {
                    data
                } = await this.$http.get('api/getthumimages/' + this.id)
                if (data.status === 0) {
                    data.message.forEach(item => {
                        item.w = 600;
                        item.h = 400;
                        item.msrc = item.src;
                    })
                    this.thumimages = data.message
                } else {
                    alert("获取失败了")
                }
            },
            handleClose() {
                console.log('close event')
            }
        },
        props: ['id']
    }
</script>

<style lang="scss">
    .pohotoinfo-cotrs {
        padding: 5px;
        .h3-size {
            font-size: 15px;
            line-height: 30px;
            text-align: center;
            color: #26a2ff;
        }
        .dateinfo {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
        .content {
            text-indent: 2rem;
        }
        .thumbs {
            /deep/ .my-gallery {
                display: flex;
                flex-wrap: wrap;
            }
            figure {
                width: 30%;
                margin: 5px;
                img {
                    width: 100%;
                    border-radius: 2px;
                    box-shadow: 0 0 8px #999;
                }
            }
        }
    }
</style>